<template>
  <div class="swiperFloorShowWrap">
    <el-carousel arrow="never" indicator-position="none" :interval="changeAllFloor" @change="changeCarousel">
      <el-carousel-item v-for="(firstItem,firstKey) in floorList" :key="firstKey">
        <div class="sonWrap">
          <div class="swiperFloor" v-for="(secondItem,secondKey) in firstItem" :key="secondKey">
            <div class="floorName">{{ secondItem.name }}</div>
            <div class="floorShowBg">
              <div class="floorShowBgItem" v-for="s in 6"
                   :style="{background:s%2?'#09589D':'#084C8B'}">
              </div>
            </div>
            <div class="swiperSonShow">
              <el-carousel arrow="never" indicator-position="none" v-if="showList[firstKey].flag"
                           :interval="changeEveryFloorInfo" direction="vertical" height="180px">
                <el-carousel-item v-for="(thirdItem,thirdIndex) in secondItem.finalList" :key="thirdIndex">
                  <div class="swiperSon">
                    <div class="swiper-item-every" v-for="(fourth,fourthIndex) in thirdItem" :key="fourthIndex">
                      <span class="round">{{ fourth.name }}</span>&nbsp;
                      <template v-if="fourth.name.length===4">
                        <marquee v-if="fourth.text.length>11" class="inner-word165" behavior="scroll" scrolldelay="300">
                          &nbsp;{{ fourth.text }}
                        </marquee>
                        <span v-else class="inner-word165">{{ fourth.text }}</span>
                      </template>
                      <template v-if="fourth.name.length===9">
                        <marquee v-if="fourth.text.length>6" class="inner-word123" behavior="scroll" scrolldelay="300">
                          &nbsp;{{ fourth.text }}
                        </marquee>
                        <span v-else class="inner-word123">{{ fourth.text }}</span>
                      </template>
                      <template v-else-if="fourth.name.length===2">
                        <marquee v-if="fourth.text.length>13" class="inner-word165" behavior="scroll" scrolldelay="300">
                          &nbsp;{{ fourth.text }}
                        </marquee>
                        <span v-else class="inner-word165">{{ fourth.text }}</span>
                      </template>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>

          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import mixFloor from "@/components/floor/mixFloor";

export default {
  mixins: [mixFloor],
  created() {
    this.getFloorList(6);
  },
}
</script>
<style lang="scss">

.floorShowBg {
  width: 224px;
  height: 240px;
  position: absolute;
  z-index: -1;
  top: 42px;

  .floorShowBgItem {
    height: 30px;
    width: 224px
  }
}

.swiperSonShow {
  position: relative;
  top: 42px;
}

.swiperSon {
  height: 180px;
  position: relative;
  overflow: hidden;
}

.swiperFloorShowWrap {
  width: 1872px;
  height: 240px;
  padding-top: 5px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  overflow: hidden;
}

.sonWrap {
  display: flex;
}

.swiperFloor {
  width: 225px;
  height: 320px;
  overflow: hidden;
  position: relative;
  margin-left: 8px;

  .floorName {
    width: 100%;
    position: absolute;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
    text-indent: 10px;
    background: url("./flooNameBg.png") no-repeat;
  }

  .swiper-item-every {
    width: 100%;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    font-weight: bold;
    display: flex;
  }

  .round {
    min-width: 48px;
    margin-right: 5px;
    line-height: 20px;
    height: 20px;
    position: relative;
    top: 5px;
    left: 5px;
    background: #042346;
    text-indent: 0;
    text-align: center !important;
    border-radius: 10px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .inner-word165 {
    width: 165px;
    position: relative;
  }

  .inner-word123 {
    width: 123px;
    position: relative;
  }
}


</style>